<h2>{{'COMMENT_DASHBOARD'|translate}}</h2>
<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{'FILTER'|translate}}">
</mat-form-field>

<div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>

        <!-- ID Column -->
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
            <td mat-cell *matCellDef="let row"> {{row.id}} </td>
        </ng-container>

        <ng-container matColumnDef="content">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'CONTENT'|translate}} </th>
            <td mat-cell *matCellDef="let row"> {{row.content}} </td>
        </ng-container>

        <ng-container matColumnDef="publishedAt">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'PUBLISHED_AT'|translate}}</th>
            <td mat-cell *matCellDef="let row"> {{row.publishedAt}} </td>
        </ng-container>

        <ng-container matColumnDef="publisherId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'PUBLISHER_ID'|translate}}</th>
            <td mat-cell *matCellDef="let row"> {{row.publisherId}} </td>
        </ng-container>

        <!-- Star Column -->
        <ng-container matColumnDef="edit" stickyEnd>
            <th mat-header-cell *matHeaderCellDef style="padding-left: 20px;">{{'DELETE'|translate}}</th>
            <td mat-cell *matCellDef="let row">
                <button (click)="commentSvc.deleteComment(row.id)" mat-button>
                    <mat-icon>delete_outline</mat-icon>
                </button>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

    <mat-paginator [showFirstLastButtons]="true" [pageIndex]="pageNumber" [pageSize]="0" [length]="total"
        (page)="pageHandler($event)"></mat-paginator>
</div>